{% extends 'userapp/master.html' %}
{% load static %}
{% block content %}

    <title>Rented Bicycles</title>
    <style>
        .bike-card {
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
        .bike-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 10px;
        }
    </style>
    
    <div class="container mt-3">
        <h2 class="text-primary text-center">Rented Bicycles</h2>
        <div class="row">
            <!-- Bike Card Example -->
             {% for ab in bikes %}
            <div class="col-md-5">
                <div class="bike-card text-center" style="min-height: 500px;">
                    <img src="{{ab.bike.image.url}}" alt="Bicycle Image" class="bike-image img-fluid w-100" style="height: 300px;" >
                    <h4 class="mt-2">{{ab.bike.category.name}}</h4>
                    <p><strong>Bike Code:</strong> {{ab.bike.code}} - {{ab.end_time}}</p>
                    <p><strong>Pick-Up Station:</strong> {{ab.bike.station.name}}, {{ab.bike.station.location}}</p>
                    <button class="btn btn-primary" 
                    onclick="openModal('{{ ab.bike.category.name }}', 
                                        '{{ ab.bike.code }}', 
                                        '{{ ab.bike.station.name }}', 
                                        '{{ ab.bike.station.location }}', 
                                        '{{ ab.start_time }}', 
                                        '{{ ab.end_time }}', 
                                        '₹{{ ab.price }}')">
                    View Details
                </button>
                
                    <a href="{% url 'feedback' %}">
                        <button class="btn btn-primary " type="submit">Give Feedback</button>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Modal Popup -->
    <div id="bikeModal" class="modal" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-4">
                <h3 id="modalBikeName" class="text-primary"></h3>
                <p><strong>Bike Code:</strong> <span id="modalBikeCode"></span></p>
                <p><strong>Pick-Up Station:</strong> <span id="modalPickup"></span></p>
                <p><strong>Start Time:</strong> <span id="modalStartTime"></span></p>
                <p><strong>End Time:</strong> <span id="modalEndTime"></span></p>
                <p><strong>Total Cost:</strong> <span id="modalCost"></span></p>
                <button class="btn btn-danger" onclick="closeModal()">Close</button>
                
            </div>
            
        </div>
    </div>

    <script>
        function openModal(name, code, station, location, start, end, cost) {
    document.getElementById("modalBikeName").innerText = name;
    document.getElementById("modalBikeCode").innerText = code;
    document.getElementById("modalPickup").innerText = station + ", " + location;
    document.getElementById("modalStartTime").innerText = start;
    document.getElementById("modalEndTime").innerText = end !== "None" ? end : "Not Available";
    document.getElementById("modalCost").innerText = cost !== "₹None" ? cost : "Not Available";
    document.getElementById("bikeModal").style.display = "block";
}

        function closeModal() {
            document.getElementById("bikeModal").style.display = "none";
        }
    </script>
{% endblock %}